<template>
  <div class="common-layout">
    <!-- 布局组件 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px">
        <!-- 侧边栏标题 -->
        <div class="aside_header">
          <img src="../../public/img/peng1.png" alt="">
          <h2>小张影院</h2>
        </div>
        <Aside :acl="acl"></Aside>
      </el-aside>

      <el-container>
        <!-- 头部 -->
        <el-header>
          <!-- <el-icon><Expand /></el-icon> -->
          <div class="left">
            <el-icon size="25px"><Fold /></el-icon>
            <h3>嘿~ <span>{{ username }}</span>,来了哥们!</h3>
          </div>
          <p>注销登录</p>
        </el-header>

        <!-- 右侧内容区 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
// 导入图标
import {Expand,Fold} from '@element-plus/icons-vue'
// 导入侧边栏组件
import Aside from '../components/Aside.vue'
// // 获取存储在本地的表单数据
const acl = JSON.parse(localStorage.getItem('acl'))
// console.log('acl',acl);
const username = localStorage.getItem('username')
</script>
<style lang='scss' scoped>
.el-menu{
  border-right: none;
}
.common-layout,.el-container,.el-aside{
    height: 100%;
}
.el-aside{
  overflow: hidden;
  .aside_header{
    display: flex;
    width: 200px;
    background-color:#545c64 ;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
    height: 60px;
    img{
      display: block;
      width: 45px;
      height: 45px;
      margin-right: 10px;
    }
    h2{
      color: #bdc3c7;
    }
  }
}
.el-header{
  background-color: #b2bec3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left{
    display: flex;
    h3{
      font-weight: 500;
      margin-left: 15px;
      span{
        color:#40739e;
      }
    }
  }
  p{
    font-size: 16px;
    color: #ff4757;
  }
}
.el-main{
  background-color: #dfe4ea;
}
</style>